<script setup>
import {ref} from "vue"
const isshow = ref(true)

</script>
<template>
  <button @click="isshow = !isshow">切换</button>
  <!-- 
    v-show 可以根据值来决定元素是否（通过display来切换元素的显示状态）
    v-if 可以根据表达式的值来决定是否显示元素
      -v-show通过css来切换组件的显示与否，切换时不会涉及到组件的重新渲染
        切换的性能比较高
        但是初始化时，需要对所有组件进行初始化（即使组件暂时不显示）
        所以他的初始化性能差一点

      -v-if通过删除添加元素的方式来切换元素的显示，切换时反复的渲染组件，
        切换的性能比较差
        v-if只会初始化要用到的组件，所以它初始化性能好一点
        v-if可以和 v-else ,v-else-if结合使用
        v-if可以配合template使用
   -->
  <div v-if="isshow">
    <h2>你猜我会显示吗？</h2>
  </div>
  <div v-else>
    <h2>我是else</h2>
  </div>
</template>